<template>
    <video
      v-if="postfix === 'mp4' || postfix === 'mov'"
      :controls="controls"
      :autoplay="autoplay"
      :preload="preload"
      :width="width"
      :height="height"
      id="resourcePlayer"
      :src="playParam.play_url"
      oncontextmenu="return false;"
      disablePictureInPicture
      controlslist="nodownload"
    >
    </video>
    <div v-else class="rewview-tips">
      <p>当前视频格式是：{{ postfix }}，不支持预览;</p>
      <p>提示：仅支持mp4、mov格式视频预览.</p>
    </div>
  
</template>

<script>
export default {
  props: {
    playParam: {
      type: Object,
      default() {
        return {};
      }
    },
    controls: {
      type: Boolean,
      default: true
    },
    autoplay: {
      type: Boolean,
      default: true
    },
    preload: {
      type: String,
      default: "auto"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "100%"
    }
  },
  data() {
    return {
      postfix: ""
    };
  },
  mounted() {
    if (this.playParam) {
      let url = this.playParam.play_url;

      let str = url.substring(url.lastIndexOf('.') + 1)
      
      this.postfix = str.toLowerCase();

      this.initPlay()
    }
  },
  beforeDestroy() {},
  methods: {
      initPlay() {
          this.$nextTick(()=>{
              let videoElement = document.getElementById("resourcePlayer")
              videoElement.volume = 0.5
          })
      }
  }
};
</script>
<style lang="scss">
  video {
    object-fit: cover;
  }
.rewview-tips{
    text-align: center;
    height: 100%;
}
</style>
